<template>
	<view class="paynow">
		<view class="paynow-wrap">
			<view class="payprice"><text class="monenyicon">￥</text>{{orderitem.qian | moneyFilter}}</view>
			<view class="commflex">
				<view class="commcolor">单价</view>
				<view><text>￥</text>{{orderitem.danjia}}</view>
			</view>
			<view class="commflex">
				<view class="commcolor">数量</view>
				<view>{{orderitem.cbt}}</view>
			</view>
			<view class="warning">请使用本人支付宝账号向以下账号自行转账</view>
			<!-- <view class="commflex">
				<view class="commcolor">收款人</view>
				<view>{{userinfo.uname}}</view>
			</view> -->
			<view class="commflex">
				<view class="commcolor">收款二维码</view>
				<image @click="showcode = true" style="width: 25px;height: 25px;" src="../../static/code.png"></image>
			</view>
			<view class="commflex" v-if="orderitem.money_type ==1">
				<view class="commcolor">微信账号</view>
				<view>{{userinfo.account}}</view>
			</view>
			<view class="commflex" v-if="orderitem.money_type ==2 ">
				<view class="commcolor">支付宝账号</view>
				<view>{{userinfo.account}}</view>
			</view>
			<!-- <view class="commflex">
				<view class="commcolor">卖家昵称</view>
				<view>会飞的鱼</view>
			</view> -->
			<view class="commflex">
				<view class="commcolor">卖家姓名</view>
				<view>{{userinfo.uname}}</view>
			</view>
			<view class="commflex">
				<view class="commcolor">订单号</view>
				<view>{{orderitem.order_id}}</view>
			</view>
			<view>
				<view class="commcolor">上传凭证</view>
				<view class="upload">
					<view class="uploadbtn" @click="editcode">
						<image class="addqrcode" v-show="!qrcode" src="../../static/images/upload-btn.png"></image>
						<image class="qrcode" v-if="qrcode" :src="qrcode"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="qrcodemodal" v-show="showcode">
			<view class="mask" @click="showcode = false"></view>
			<view class="modalinfo">
				<image class="bgimage" :src="userinfo.eqcode"></image>
			</view>
		</view>
		<view class="btncell">
			<view class="cancleorder" @click="cancelorder(orderitem.id)">取消订单</view>
			<view class="confirmorder" @click="confirmorder">我已付款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: '',
				orderitem: {},
				userinfo: {},
				showcode: false,
				pz: '',
				id:'',
				paytype:0,
				orderstatus:false,
			}
		},
		onLoad(option) {
			this.userinfo = JSON.parse(option.payParam)
			this.id = option.id
			this.paytype = option.paytype
			this.loaddata()
		},
		methods: {
			
			cancelorder(id,status){
				let that = this;
				if(that.orderstatus == true){
					that.$api.msg('该订单已取消')
					return;
				}
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/cancel',
					data: {
						id: id,
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						that.$api.msg(data[1].data.msg)
						that.orderstatus = true
					} 
				
				}).catch(err => {
					console.log(err)
				})
			},
			
			editcode() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						uni.showLoading({
						    title: '加载中'
						});
						let file = res.tempFilePaths[0]
						console.log(res)
						this.$Request.upload({
							url: '/api/Usercentinfo/editPhoto',
							filePath: file,
							formData: null,
							name: 'headPic',
							success: function(res) {
								uni.hideLoading()
								let data = JSON.parse(res.data)
								that.qrcode = data.fullPath
								console.log(that.qrcode)
							}
						})
					}
				})
			},
			confirmorder() {
				let that = this;
				if(that.orderstatus == true){
					that.$api.msg('该订单已取消')
					return;
				}
				if(that.qrcode == ''){
					that.$api.msg('请上传凭证！')
					return;
				}
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/subimt_pay',
					data: {
						id:this.id ,
						type: '1',
						pz: that.qrcode
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						that.$api.msg(data[1].data.msg)
						if(that.paytype == 1){
							console.log('1')
							uni.reLaunch({
								url:'/subPackage/buyinglist/buyinglist'
							})
						}else{
							uni.navigateBack({
								
							})
						}
					}else{
						that.$api.msg(data[1].data.msg)
					}
					
				}).catch(err => {
					console.log(err)
				})

			},
			loaddata() {
				let that = this;
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/out_in_detail',
					data: {
						status: 1,
						type: 1,
						id: that.id
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						console.log(data[1].data.data)
						that.orderitem = data[1].data.data.detail
						that.orderitem.orderstatus = '取消订单'
					}

				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.qrcodemodal {

		.mask {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #000;
			opacity: 0.5;
		}

		.modalinfo {
			width: 300px;
			position: absolute;
			z-index: 99;
			transform: translateY(50%);
			top: 20px;
			background-color: #000;
			/* width: 100px; */
			left: 50%;
			transform: translateX(-50%);

			.bgimage {
				width: 100%;
				height: 600px;
			}
		}
	}

	.paynow {
		padding-bottom: 20px;
		.paynow-wrap {
			padding: 30upx;
			font-size: 30upx;

			.payprice {
				font-size: 46upx;
				color: #ED5B25;

				.monenyicon {
					font-size: 26upx;
				}
			}

			.warning {
				font-size: 24upx;
				color: #ED5B25;
				margin-top: 40upx;
				margin-bottom: 40upx;
			}

			.commflex {
				display: flex;
				justify-content: space-between;
				padding: 20upx 0upx;
			}

			.commcolor {
				color: #757575;
			}

			.upload {
				padding-top: 20upx;

				.tit {
					margin-bottom: 20upx;
					display: inline-block;
				}

				.uploadbtn {
					display: flex;

					.qrcode {
						width: 100%;
						height: 800px;
						margin: 0 auto;
					}

					.addqrcode {
						width: 160upx;
						height: 160upx;
						margin-right: 10px;

						imaeg {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.btncell {
			display: flex;
			justify-content: space-around;

			.cancleorder {
				background-color: #F9DDCB;
				height: 70upx;
				font-size: 26upx;
				text-align: center;
				width: 100px;
				line-height: 70upx;
				border-radius: 10upx;
				width: 336upx;
			}

			.confirmorder {
				background-color: #FF6500;
				border-radius: 10upx;
				height: 70upx;
				width: 336upx;
				font-size: 26upx;
				text-align: center;
				width: 336upx;
				color: #fff;
				line-height: 70upx;
			}
		}
	}
</style>
